// import React, { Component } from 'react'
// import { Layout } from 'antd';
// import rstore from './rstore';
// const { Sider } = Layout;
// export default class SideAttr extends Component {
//   componentDidMount() {
//     this.unsubscribe = rstore.subscribe(() => {
//       // store state 改变
//       this.forceUpdate();
//     });
//   }
//   componentWillUnmount() {
//     if (this.unsubscribe) {
//       this.unsubscribe();
//     }
//   }
//   add = () => {
//     rstore.dispatch({ type: 'ADD' });
//   }
//   changeMsg = () => {
//     rstore.dispatch({ type: 'SET' });
//   }
//   asyAdd = () => {
//     rstore.dispatch((dispatch, getState) => {
//       setTimeout(() => {
//         dispatch({ type: "ADD" });
//         console.log("getState", getState()); //sy-log
//       }, 1000);
//     });
//   };
//   promiseMinus = () => {
//     // store.dispatch(
//     //   Promise.resolve({
//     //     type: "MINUS",
//     //     payload: 100
//     //   })
//     // );
//   };
//   render() {
//     return (
//       <div>
//         <h3>ReduxPage</h3>
//         <p>{rstore.getState().count}</p>
//         <p>{rstore.getState().msg}</p>
//         <button onClick={this.add}>add</button>
//         <button onClick={this.asyAdd}>asyAdd</button>
//         <button onClick={this.changeMsg}>changeMsg</button>
//       </div>
//     )
//   }
//   // render() {
//   //   return (
//   //     <Sider theme='light'>
//   //       <div style={{
//   //         display: 'flex',
//   //         flexWrap: 'wrap',
//   //         border: '1px solid rgb(221 210 210)',
//   //         padding: '16px'
//   //       }}>
//   //         <div style={{ width: '50%' }}>X {rstore.getState()}</div>
//   //         {/* <div style={{ width: '50%' }}>Y -483</div>
//   //         <div style={{ width: '50%' }}>W 390.62</div>
//   //         <div style={{ width: '50%' }}>H 0</div>
//   //         <div style={{ width: '50%' }}>角度 9.73</div> */}
//   //       </div>
//   //     </Sider>
//   //   )
//   // }
// }

import React, { useEffect } from 'react'
import { Menu, Layout } from 'antd';
import { useSelector } from 'react-redux';
const { Sider } = Layout;
export default function SideAttr() {
  const drawData = useSelector(({ drawAttr }) => drawAttr)
  return (
    <Sider theme='light'>
      <div style={{
        display: 'flex',
        flexWrap: 'wrap',
        border: '1px solid rgb(221 210 210)',
        padding: '16px'
      }}>
        <div style={{ width: '50%' }}>S {drawData?.startPt?.toString()}</div>
        <div style={{ width: '50%' }}>E {drawData?.endPt?.toString()}</div>
        <div style={{ width: '50%' }}>L {drawData?.length}</div>
        <div style={{ width: '50%' }}>
          {drawData?.width &&
            <span>W {drawData?.width}</span>
          }
        </div>
      </div>
    </Sider>
  )
}
